<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body {
	font-family: '나눔고딕';
	font-size: 14px;
	font-weight: bold;
	color: red;
	margin-top: 100px;
	background-image: url('../images/main.jpg');
	background-size: 55% 57%;
}

input {
	font-family: '나눔고딕';
	font-size: 14px;
	font-weight: bold;
	color: red;
}

#pos {
	width: 700px;
	height: 600px;
}

tr{
	background-color: black;
}

</style>
<script type="text/javascript">
	window.onload = function(){
		var submit = document.getElementById("submit");
		submit.onclick = function(){
			var id = form.id.value;
			var pwd1 = form.pwd1.value;
			var pwd2 = form.pwd2.value;
			var name = form.name.value;
			var gender = form.gender;
			for(var i=0; i<gender.length;i++){
				if(gender[i].checked){
					if(gender[i].value=="w") gender="녀자";
					else if(gender[i].value=="m") gender="남자";
				}
			}
			var birty = form.birth_year[form.birth_year.selectedIndex].value+"/"+
				form.birth_month[form.birth_month.selectedIndex].value+"/"+
				form.birth_day[form.birth_day.selectedIndex].value;
			var tel1 = form.tel1[form.tel1.selectedIndex].value;
			var tel2 = form.tel2.value;
			var tel3 = form.tel3.value;
			var tel = tel1+"-"+tel2+"-"+tel3;
			var email1 = form.email1.value;
			var email = email1+"@"+form.email2[form.email2.selectedIndex].value;
			var grade = form.grade;
			var gra = grade[grade.selectedIndex].value;
				
			if(id==""){
				alert("아이디를 입력해주세요!");
				form.id.focus();
				return;
			}
			if(pwd1==""){
				alert("비밀번호를 입력해주세요!");
				form.pwd1.focus();
				return;
			}
			if(pwd2==""){
				alert("비밀번호를 입력해주세요!");
				form.pwd2.focus();
				return;
			}
			if(pwd1!=pwd2){
				alert("비밀번호와 재확인이 일치하지 않습니다!");
				form.pwd1.focus();
				return;
			}
			if(name==""){
				alert("이름을 입력해주세요!");
				form.name.focus();
				return;
			}
			if(tel2.length<3){
				alert("가운데 자리는 숫자 3자리 이상 입력해주세요!");
				form.tel2.focus();
				return;
			}
			if(tel3.length!=4){
				alert("마지막 자리는 숫자 4자리 입력해주세요!");
				form.tel2.focus();
				return;
			}
			if(email1==""){
				alert("이메일을 입력해주세요!");
				form.email.focus();
				return;
			}
			if(grade.selectedIndex==0){
				alert("학력을 선택해주세요!");
				return;
			}
		}
	}
	
	function BC(form){
		var mv = form.birth_month[form.birth_month.selectedIndex].value;
		var md = form.birth_day;
		var my = Number(form.birth_year.value);
		if(mv == "01" || mv == "03" || mv == "05" || mv == "07" || mv == "08" || mv == "10" || mv == "12"){
			md[28].style.display="";
			md[29].style.display="";
			md[30].style.display="";
		}
		else if(mv == "04" || mv == "06" || mv == "09" || mv == "11"){
			md[28].style.display="";
			md[29].style.display="";
			md[30].style.display="none";
		}else if(mv == "02"){
			if(my%4==0){
				md[28].style.display="";
				md[29].style.display="none";
				md[30].style.display="none";
			}else{
				md[28].style.display="none";
				md[29].style.display="none";
				md[30].style.display="none";
			}
		}
	}
	
</script>
</head>
<body bgcolor="black" oncontextmenu="return false">

	<form action="#" name="form">
		<!-- 구분 테이블 -->
		<div align=center>
			<div>
				<font style="font-family: '궁서체'; font-size: 50px; text-shadow: 3px 3px 1px white;">
					<b> *^*^* 회원가입 *^*^* </b>
				</font>
			</div>
			<div id='pos'>
				<table width="80%" bgcolor="gray" cellspacing="1">
					<tr>
						<td>아이디</td>
						<td><input type="text" name="id" id="id" size="20" value="choi" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>비밀번호</td>
						<td><input type="password" name="pwd1" id="pwd1" size="20" /></td>
					</tr>
					<tr>
						<td>비밀번호확인</td>
						<td><input type="password" name="pwd2" id="pwd2" size="20" /></td>
					</tr>
					<tr>
						<td>이름</td>
						<td><input type="text" name="name" id="name" size="20" value="미르메"/></td>
					</tr>
					<tr>
						<td>성별</td>
						<td>
							<input type="radio" name="gender" value="w" />녀자
							<input type="radio" name="gender" value="m" checked/>남자
						</td>
					</tr>
					<tr>
						<td>생일</td>
						<td>
							<select	name="birth_year" onchange="BC(this.form)">
								<option value=1910>1910년</option>
								<option value=1911>1911년</option>
								<option value=1912>1912년</option>
								<option value=1913>1913년</option>
								<option value=1914>1914년</option>
								<option value=1915>1915년</option>
								<option value=1916>1916년</option>
								<option value=1917>1917년</option>
								<option value=1918>1918년</option>
								<option value=1919>1919년</option>
								<option value=1920>1920년</option>
								<option value=1921>1921년</option>
								<option value=1922>1922년</option>
								<option value=1923>1923년</option>
								<option value=1924>1924년</option>
								<option value=1925>1925년</option>
								<option value=1926>1926년</option>
								<option value=1927>1927년</option>
								<option value=1928>1928년</option>
								<option value=1929>1929년</option>
								<option value=1930>1930년</option>
								<option value=1931>1931년</option>
								<option value=1932>1932년</option>
								<option value=1933>1933년</option>
								<option value=1934>1934년</option>
								<option value=1935>1935년</option>
								<option value=1936>1936년</option>
								<option value=1937>1937년</option>
								<option value=1938>1938년</option>
								<option value=1939>1939년</option>
								<option value=1940>1940년</option>
								<option value=1941>1941년</option>
								<option value=1942>1942년</option>
								<option value=1943>1943년</option>
								<option value=1944>1944년</option>
								<option value=1945>1945년</option>
								<option value=1946>1946년</option>
								<option value=1947>1947년</option>
								<option value=1948>1948년</option>
								<option value=1949>1949년</option>
								<option value=1950>1950년</option>
								<option value=1951>1951년</option>
								<option value=1952>1952년</option>
								<option value=1953>1953년</option>
								<option value=1954>1954년</option>
								<option value=1955>1955년</option>
								<option value=1956>1956년</option>
								<option value=1957>1957년</option>
								<option value=1958>1958년</option>
								<option value=1959>1959년</option>
								<option value=1960>1960년</option>
								<option value=1961>1961년</option>
								<option value=1962>1962년</option>
								<option value=1963>1963년</option>
								<option value=1964>1964년</option>
								<option value=1965>1965년</option>
								<option value=1966>1966년</option>
								<option value=1967>1967년</option>
								<option value=1968>1968년</option>
								<option value=1969>1969년</option>
								<option value=1970>1970년</option>
								<option value=1971>1971년</option>
								<option value=1972>1972년</option>
								<option value=1973>1973년</option>
								<option value=1974>1974년</option>
								<option value=1975>1975년</option>
								<option value=1976>1976년</option>
								<option value=1977>1977년</option>
								<option value=1978>1978년</option>
								<option value=1979>1979년</option>
								<option value=1980>1980년</option>
								<option value=1981>1981년</option>
								<option value=1982>1982년</option>
								<option value=1983>1983년</option>
								<option value=1984>1984년</option>
								<option value=1985>1985년</option>
								<option value=1986 selected>1986년</option>
								<option value=1987>1987년</option>
								<option value=1988>1988년</option>
								<option value=1989>1989년</option>
								<option value=1990>1990년</option>
								<option value=1991>1991년</option>
								<option value=1992>1992년</option>
								<option value=1993>1993년</option>
								<option value=1994>1994년</option>
								<option value=1995>1995년</option>
								<option value=1996>1996년</option>
								<option value=1997>1997년</option>
								<option value=1998>1998년</option>
								<option value=1999>1999년</option>
								<option value=2000>2000년</option>
								<option value=2001>2001년</option>
								<option value=2002>2002년</option>
								<option value=2003>2003년</option>
								<option value=2004>2004년</option>
								<option value=2005>2005년</option>
								<option value=2006>2006년</option>
								<option value=2007>2007년</option>
								<option value=2008>2008년</option>
								<option value=2009>2009년</option>
								<option value=2010>2010년</option>
								<option value=2011>2011년</option>
								<option value=2012>2012년</option>
								<option value=2013>2013년</option>
								<option value=2014>2014년</option>
							</select>&nbsp; 
							<select name="birth_month" onchange="BC(this.form)">
								<option value=01>1월</option>
								<option value=02>2월</option>
								<option value=03>3월</option>
								<option value=04>4월</option>
								<option value=05>5월</option>
								<option value=06>6월</option>
								<option value=07>7월</option>
								<option value=08>8월</option>
								<option value=09>9월</option>
								<option value=10>10월</option>
								<option value=11>11월</option>
								<option value=12 selected>12월</option>
							</select>&nbsp; 
							<select name="birth_day">
								<option selected value=01>1일</option>
								<option value=02>2일</option>
								<option value=03>3일</option>
								<option value=04>4일</option>
								<option value=05>5일</option>
								<option value=06>6일</option>
								<option value=07>7일</option>
								<option value=08>8일</option>
								<option value=09>9일</option>
								<option value=10>10일</option>
								<option value=11>11일</option>
								<option value=12>12일</option>
								<option value=13>13일</option>
								<option value=14>14일</option>
								<option value=15>15일</option>
								<option value=16>16일</option>
								<option value=17>17일</option>
								<option value=18>18일</option>
								<option value=19>19일</option>
								<option value=20>20일</option>
								<option value=21>21일</option>
								<option value=22>22일</option>
								<option value=23>23일</option>
								<option value=24>24일</option>
								<option value=25>25일</option>
								<option value=26>26일</option>
								<option value=27>27일</option>
								<option value=28>28일</option>
								<option value=29 style="display: " selected>29일</option>
								<option value=30 style="display: ">30일</option>
								<option value=31 style="display: ">31일</option>
							</select>&nbsp;
						</td>
					</tr>
					<tr>
						<td>연락처</td>
						<td>
							<select name="tel1">
								<option value="010">010</option>
								<option value="011">011</option>
								<option value="015">015</option>
								<option value="016">016</option>
								<option value="017">017</option>
								<option value="018">018</option>
								<option value="019">019</option>
							</select>
							<label>-</label> 
							<input type="number" name="tel2" maxlength="4" style="width: 100px;" value="4444"> 
							<label>-</label> 
							<input type="number" maxLength=4 name="tel3" style="width: 100px" value="4444">
						</td>
					</tr>
					<tr>
						<td>관심사항</td>
						<td>
							<input type="checkbox" name="inter" value="pol" checked/>정치 
							<input type="checkbox" name="inter" value="eco" />경제 
							<input type="checkbox" name="inter" value="spo" />스포츠 
							<input type="checkbox" name="inter" value="ent" />연예
						</td>
					</tr>
					<tr>
						<td>우편번호</td>
						<td>
							<input type="text" name="zipcode" disabled="disabled" value="132-022">
							<input type="button" value="검색">
						</td>
					</tr>
					<tr>
						<td>주소</td>
						<td>
							<input type="text" name="addr1" size="30" disabled="disabled" value="서울 도봉구 방학2동"><br/>
							<input type="text" name="addr2" size="30">
						</td>
					</tr>
					<tr>
						<td>이메일</td>
						<td>
							<input type="text" name="email1" value="dmsrbwkd">
							<label>@</label>
							<select name="email2">
								<option value="nate.com">nate.com</option>
								<option value="cyworld.com">cyworld.com</option>
								<option value="empas.com">empas.com</option>
								<option value="lycos.co.kr">lycos.co.kr</option>
								<option value="netsgo.com">netsgo.com</option>
								<option value="hanmail.net">hanmail.net</option>
								<option value="naver.com">naver.com</option>
								<option value="yachoo.co.kr">yachoo.co.kr</option>
								<option value="paran.com">paran.com</option>
								<option value="hotmail.com">hotmail.com</option>
								<option value="dreamwiz.com">dreamwiz.com</option>
								<option value="gmail.com">gmail.com</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>학력</td>
						<td>
							<select name="grade">
								<option value="">==학력을 선택하세요==</option>
								<option value="ele">초졸</option>
								<option value="mid">중졸</option>
								<option value="hig">고졸</option>
								<option value="uni" selected>초대졸</option>
								<option value="uni">대졸</option>
								<option value="uni">석사이상</option>
							</select>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<table>
								<tr>
									<td>
										<input type="button" value="수정" id="submit"/>
										<input type="button" value="취소">
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</form>
</body>
</html>